<template>
  <el-container id="joint">
    <div id="ruler2"></div>
    <el-header>
      <!-- <div class="titleWrap">
        <img :src="logo"
             style="width:50px;height:50px;">
        <h2>数字资源制作</h2>
      </div> -->
      <div class="funtionBtn">
        <div class="title">
          <el-link icon="el-icon-back"
                   @click="creationCancel"
                   :underline="false">返回
          </el-link>
        </div>
        <div class="quickFunction">
          <div class="left">
            <el-tooltip :disabled="disabled"
                        content="缩放"
                        placement="bottom"
                        effect="light">
              <el-button type="text">
                <el-select v-model="headerSelect"
                           @change="zoom"
                           placeholder="请选择">
                  <el-option v-for="(item,idx) in headerSelectData"
                             :key="idx"
                             :value="item.value"
                             :label="item.label">
                  </el-option>
                </el-select>
              </el-button>
            </el-tooltip>
            <el-divider direction="vertical" />
            <el-tooltip :disabled="disabled"
                        content="清空"
                        placement="bottom"
                        effect="light">
              <el-button type="text">
                <span class="icon iconfont icon-qingkong"
                      @click="clert" />
              </el-button>
            </el-tooltip>
            <el-tooltip :disabled="disabled"
                        content="撤销"
                        placement="bottom"
                        effect="light">
              <el-button type="text">
                <span class="icon iconfont icon-7chexiao"
                      @click="revocation" />
              </el-button>
            </el-tooltip>
            <el-tooltip :disabled="disabled"
                        content="反撤销"
                        placement="bottom"
                        effect="light">
              <el-button type="text">
                <span class="icon iconfont icon-fanchexiao"
                      @click="theUndo" />
              </el-button>
            </el-tooltip>
            <el-divider direction="vertical" />
            <el-tooltip :disabled="disabled"
                        content="全屏/退出全屏"
                        placement="bottom"
                        effect="light">
              <el-button type="text">
                <span :class="fullscreenClass"
                      @click="fullExitFull" />
              </el-button>
            </el-tooltip>
            <el-tooltip :disabled="disabled"
                        content="浏览"
                        placement="bottom"
                        effect="light">
              <el-button type="text">
                <span class="icon iconfont icon-chakan"
                      @click="Look" />
              </el-button>
            </el-tooltip>
            <el-divider direction="vertical" />
            <el-tooltip :disabled="disabled"
                        content="置于顶层"
                        placement="bottom"
                        effect="light">
              <el-button type="text">
                <span class="el-icon-top"
                      @click="atTheTop" />
              </el-button>
            </el-tooltip>
            <el-tooltip :disabled="disabled"
                        content="置于底层"
                        placement="bottom"
                        effect="light">
              <el-button type="text">
                <span class="el-icon-bottom"
                      @click="atTheBottom" />
              </el-button>
            </el-tooltip>
            <!-- <el-divider direction="vertical" /> -->
            <!-- <el-tooltip :disabled="disabled"
                        content="画布设置"
                        placement="bottom"
                        effect="light">
              <el-button type="text">
                <i class="el-icon-setting"
                   @click="setCanvas"></i>
              </el-button>
            </el-tooltip> -->
            <!-- <el-tooltip :disabled="disabled"
                        content="按住ctrl/command,可多选元件"
                        placement="bottom"
                        effect="light">
              <el-button type="text">
                <span class="icon iconfont icon-zhuyi" />
              </el-button>
            </el-tooltip> -->
          </div>
          <div class="rihgt">
            <el-tooltip :disabled="disabled"
                        content="svg"
                        placement="bottom"
                        effect="light">
              <el-button type="text">
                <span class="icon iconfont icon-tupian"
                      @click="openAsSVG" />
              </el-button>
            </el-tooltip>
            <el-tooltip :disabled="disabled"
                        content="保存"
                        placement="bottom"
                        effect="light">
              <el-button type="text">
                <span class="icon iconfont icon-baocun"
                      @click="clickSaveJson" />
              </el-button>
            </el-tooltip>
          </div>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="250px">
        <el-collapse v-model="activeNames"
                     accordion>
          <el-collapse-item title="基础元件"
                            name="1">
            <div id="workflowStencil"></div>
          </el-collapse-item>
          <el-collapse-item title="自定义元件"
                            name="2">
            <div id="custom"></div>
          </el-collapse-item>
          <el-collapse-item title="主题元件"
                            name="3">
            <div id="theme"></div>
          </el-collapse-item>
        </el-collapse>
      </el-aside>
      <el-main>
        <ul id="scaleplate"></ul>
        <div id="workflowPaper"></div>
        <!-- 基础元素样式修改开始 -->
        <div id="modifyFormat">
          <el-tabs v-model="styleTabs"
                   :stretch="true">
            <el-tab-pane label="样式"
                         lazy
                         name="first">
              <el-collapse v-model="styleTabsItem.backdrop">
                <el-collapse-item title="背景"
                                  name="1">
                  <el-form :label-position="labelPosition"
                           label-width="60px"
                           :model="modifyFormatData">
                    <el-form-item label="颜色">
                      <el-color-picker v-model="modifyFormatData.bodyfill"
                                       show-alpha
                                       :predefine="historyColorData"
                                       @change="recomposeBodyFill(modifyFormatData.cell,modifyFormatData.bodyfill)">
                      </el-color-picker>
                    </el-form-item>
                    <el-form-item label="透明度">
                      <el-input-number v-model="modifyFormatData.fillOpacity"
                                       controls-position="right"
                                       style="display: inline-block;width: 105px;"
                                       @input="recomposeFillOpacity(modifyFormatData.cell,modifyFormatData.fillOpacity)"
                                       :min="0"
                                       :step="0.1"
                                       :max="1"></el-input-number>
                    </el-form-item>
                  </el-form>
                </el-collapse-item>
                <el-collapse-item title="大小"
                                  name="1">
                  <el-form :label-position="labelPosition"
                           label-width="60px"
                           :model="modifyFormatData">
                    <el-form-item label="宽">
                      <el-input-number v-model="modifyFormatData.width"
                                       controls-position="right"
                                       style="display: inline-block;width: 105px;"
                                       @input="rerecomposeWidth"
                                       :min="0"
                                       :step="1"></el-input-number>
                    </el-form-item>
                    <el-form-item label="高">
                      <el-input-number v-model="modifyFormatData.height"
                                       controls-position="right"
                                       style="display: inline-block;width: 105px;"
                                       @input="rerecomposeWidth"
                                       :min="0"
                                       :step="1"></el-input-number>
                    </el-form-item>
                  </el-form>
                </el-collapse-item>
                <el-collapse-item title="边框"
                                  name="2">
                  <el-form :label-position="labelPosition"
                           label-width="60px"
                           :model="modifyFormatData">
                    <el-form-item label="颜色"
                                  class="borderColor">
                      <el-color-picker v-model="modifyFormatData.stroke"
                                       show-alpha
                                       :predefine="historyColorData"
                                       @change="recomposeBorderColor(modifyFormatData.cell,modifyFormatData.stroke)">
                      </el-color-picker>
                    </el-form-item>
                    <el-form-item label="类型">
                      <el-select @change="recomposeStrokeDasharray(modifyFormatData.cell,modifyFormatData.strokeDasharray)"
                                 placeholder="请选择"
                                 style="display: inline-block;width: 105px;"
                                 v-model="modifyFormatData.strokeDasharray">
                        <el-option v-for="(item,idx) in selectStrokeDasharray"
                                   :key="idx"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="线宽">
                      <el-input-number v-model="modifyFormatData.strokeWidth"
                                       controls-position="right"
                                       style="display: inline-block;width: 105px;"
                                       @input="recomposeStrokeWidth(modifyFormatData.cell,modifyFormatData.strokeWidth)"
                                       :min="0"
                                       :step="1"
                                       :max="10"></el-input-number>
                    </el-form-item>
                    <el-form-item class="rounded"
                                  label="圆角">
                      <el-input-number v-model="modifyFormatData.rx"
                                       controls-position="right"
                                       style="display: inline-block;width: 105px;"
                                       @input="recomposeRx(modifyFormatData.cell,modifyFormatData.rx)"
                                       :min="0"
                                       :step="1"
                                       :max="500"></el-input-number>
                    </el-form-item>
                  </el-form>
                </el-collapse-item>
                <el-collapse-item title="文字"
                                  name="3">
                  <el-form :label-position="labelPosition"
                           label-width="60px"
                           :model="modifyFormatData">
                    <el-form-item label=" "
                                  style="width:100%">
                      <el-input type="textarea"
                                placeholder="请输入文字内容"
                                style="top:20px"
                                @input="recomposeText(modifyFormatData.cell,modifyFormatData.text)"
                                v-model="modifyFormatData.text"></el-input>
                    </el-form-item>
                    <el-form-item label="颜色">
                      <el-color-picker @input="recomposeLabelFill(modifyFormatData.cell,modifyFormatData.labelfill)"
                                       show-alpha
                                       :predefine="historyColorData"
                                       v-model="modifyFormatData.labelfill"></el-color-picker>
                    </el-form-item>
                    <el-form-item label="字体">
                      <el-select v-model="modifyFormatData.fontFamily"
                                 placeholder="请选择"
                                 @change="recomposeFontFamily(modifyFormatData.cell,modifyFormatData.fontFamily)">
                        <el-option :class="item.value"
                                   v-for="(item,idx) in selectFontFamily"
                                   :key="idx"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="字号">
                      <el-input-number v-model="modifyFormatData.fontSize"
                                       controls-position="right"
                                       style="display: inline-block;width: 105px;"
                                       @input="recomposeFontSize(modifyFormatData.cell,modifyFormatData.fontSize)"
                                       :min="1"
                                       :step="1"
                                       :max="200"></el-input-number>
                    </el-form-item>
                    <el-form-item label="加粗">
                      <el-select v-model="modifyFormatData.fontWeight"
                                 placeholder="请选择"
                                 @change="recomposeFontWeight(modifyFormatData.cell,modifyFormatData.fontWeight)">
                        <el-option :style="{'font-weight':item.value}"
                                   v-for="(item,idx) in selectFontWeight"
                                   :key="idx"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="倾斜">
                      <el-select v-model="modifyFormatData.fontStyle"
                                 placeholder="请选择"
                                 @change="recomposeFontStyle(modifyFormatData.cell,modifyFormatData.fontStyle)">
                        <el-option :style="{'font-style':item.value}"
                                   class="oblique"
                                   v-for="(item,idx) in fontStyleData"
                                   :key="idx"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="对齐">
                      <el-select v-model="modifyFormatData.fontAlign"
                                 placeholder="请选择"
                                 @change="recomposeFontAlign(modifyFormatData.cell,modifyFormatData)">
                        <el-option :style="{'font-style':item.value}"
                                   class="oblique"
                                   v-for="(item,idx) in alignData"
                                   :key="idx"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="透明度">
                      <el-input-number v-model="modifyFormatData.textOpacity"
                                       controls-position="right"
                                       style="display: inline-block;width: 105px;"
                                       @input="recomposeTextOpacity(modifyFormatData.cell,modifyFormatData.textOpacity)"
                                       :min="0"
                                       :step="0.05"
                                       :max="1"></el-input-number>
                    </el-form-item>
                    <el-form-item label="字间距">
                      <el-input-number v-model="modifyFormatData.letterSpacing"
                                       controls-position="right"
                                       style="display: inline-block;width: 105px;"
                                       @input="recomposeletterSpacing(modifyFormatData.cell,modifyFormatData.letterSpacing)"
                                       :min="0"
                                       :step="0.1"></el-input-number>
                    </el-form-item>
                    <!-- <el-form-item label="位置X">
                      <el-input-number v-model="modifyFormatData.transformX"
                                       controls-position="right"
                                       style="display: inline-block;width: 105px;"
                                       @input="recomposeFontLocation()"
                                       :step="1"></el-input-number>
                    </el-form-item>
                    <el-form-item label="位置Y">
                      <el-input-number v-model="modifyFormatData.transformY"
                                       controls-position="right"
                                       @input="recomposeFontLocation()"
                                       style="display: inline-block;width: 105px;"
                                       :step="1"></el-input-number>
                    </el-form-item> -->
                  </el-form>
                </el-collapse-item>
                <!-- <el-collapse-item title="阴影"
                                  class="filter"
                                  name="4">
                  <el-form :label-position="labelPosition"
                           label-width="60px"
                           :model="modifyFormatData">
                    <el-form-item label="X">
                      <el-input-number v-model="modifyFormatData.filter.dx"
                                       controls-position="right"
                                       style="display: inline-block;width: 105px;"
                                       @input="recomposeFilter(modifyFormatData.cell,modifyFormatData.filter)"
                                       :min="-20"
                                       :step="1"
                                       :max="20"></el-input-number>
                    </el-form-item>
                    <el-form-item label="Y">
                      <el-input-number v-model="modifyFormatData.filter.dy"
                                       controls-position="right"
                                       style="display: inline-block;width: 105px;"
                                       @input="recomposeFilter(modifyFormatData.cell,modifyFormatData.filter)"
                                       :min="-20"
                                       :step="1"
                                       :max="20"></el-input-number>
                    </el-form-item>
                    <el-form-item label="模糊程度">
                      <el-input-number v-model="modifyFormatData.filter.blur"
                                       controls-position="right"
                                       style="display: inline-block;width: 105px;"
                                       @input="recomposeFilter(modifyFormatData.cell,modifyFormatData.filter)"
                                       :min="0"
                                       :step="1"
                                       :max="20"></el-input-number>
                    </el-form-item>
                  </el-form>
                </el-collapse-item> -->
              </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="交互"
                         lazy
                         name="second">
              <el-collapse v-model="styleTabsItem.resource">
                <el-collapse-item title="节点"
                                  name="1">
                  <el-form :label-position="labelPosition"
                           label-width="60px"
                           :model="imgFormatData">
                    <el-form-item label=" "
                                  style="padding-top:20px">
                      <el-input-number @change="recomposeHierarchy(modifyFormatData.cell,modifyFormatData.hierarchy)"
                                       controls-position="right"
                                       v-model="modifyFormatData.hierarchy"
                                       :min="0"></el-input-number>
                    </el-form-item>
                  </el-form>
                </el-collapse-item>
                <el-collapse-item title="交互类型"
                                  name="2">
                  <el-form :label-position="labelPosition"
                           label-width="60px"
                           :model="modifyFormatData">
                    <el-radio-group @change="recomposeincident(modifyFormatData.cell,modifyFormatData.incident)"
                                    v-model="modifyFormatData.incident">
                      <el-radio-button v-for="(item,idx) in selectIncident"
                                       :key="idx"
                                       :label="item.label"></el-radio-button>
                    </el-radio-group>
                  </el-form>
                </el-collapse-item>
                <el-collapse-item title="交互数据"
                                  name="3">
                  <el-form :label-position="labelPosition"
                           label-width="60px"
                           :model="modifyFormatData">
                    <span v-if="modifyFormatData.incident=='文本'">
                      <!-- <el-form-item label="弹出框宽度">
                        <el-input-number v-model="modifyFormatData.dialogWidth"
                                         controls-position="right"
                                         style="display: inline-block;width: 105px;"
                                         @input="recomposeDialogWidth(modifyFormatData.cell,modifyFormatData.dialogWidth)"
                                         :min="0"
                                         :step="1"></el-input-number>
                      </el-form-item>
                      <el-form-item label="弹出框高度">
                        <el-input-number v-model="modifyFormatData.dialogHeight"
                                         controls-position="right"
                                         style="display: inline-block;width: 105px;"
                                         @input="recomposeDialogHeight(modifyFormatData.cell,modifyFormatData.dialogHeight)"
                                         :min="0"
                                         :step="1"></el-input-number>
                      </el-form-item> -->
                      <el-form-item label="背景颜色"
                                    class="borderColor">
                        <el-color-picker v-model="modifyFormatData.dialogColor"
                                         show-alpha
                                         :predefine="historyColorData"
                                         @change="recomposeDialogColor(modifyFormatData.cell,modifyFormatData.dialogColor)">
                        </el-color-picker>
                      </el-form-item>
                      <el-form-item label=""
                                    style="margin-top: 50px;">
                        <el-button @click="openRichTextFun">打开富文本编辑器</el-button>
                      </el-form-item>

                    </span>
                    <span v-else>
                      <el-form-item label=""
                                    style="width:100%;margin-top: 49px;">
                        <el-upload class="avatar-uploader"
                                   action="/pmph/action/flowChartAction/uploadFile"
                                   style="widht:180px"
                                   :show-file-list="false"
                                   :on-success="setIncidentData"
                                   :before-upload="baiscShapesResource">
                          <div v-if="modifyFormatData.incidentData"
                               style=""
                               class="uploadType">
                            <div v-if="modifyFormatData.incident=='视频'"
                                 style="position: relative;">
                              <video width="100px"
                                     height="80px">
                                <source :src="setUrl(modifyFormatData.incidentData)">
                              </video>
                              <i class="el-icon-close"
                                 style="position: absolute;op: -11px;right: 0;top:0;"
                                 @click="baiscShapesRemove"></i>
                            </div>
                            <div v-if="modifyFormatData.incident=='图片'"
                                 style="position: relative;">
                              <img :src="setUrl(modifyFormatData.incidentData)"
                                   class="avatar">
                              <i class="el-icon-close"
                                 style="position: absolute;op: -11px;right: 0;top:0;"
                                 @click="baiscShapesRemove"></i>
                            </div>
                            <div v-if="modifyFormatData.incident=='音频'"
                                 style="position: relative;">
                              <audio :src="setUrl(modifyFormatData.incidentData)"></audio>
                              <i class="el-icon-close"
                                 style="position: absolute;op: -11px;right: 0;top:0;"
                                 @click="baiscShapesRemove"></i>
                            </div>
                          </div>

                          <i v-else
                             class="el-icon-plus avatar-uploader-icon" />
                        </el-upload>
                      </el-form-item>
                    </span>
                  </el-form>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 基础元素样式修改结束  -->
        <!-- 图片样式修改开始 -->
        <div id="modifyImage">
          <el-tabs v-model="imageTabs"
                   :stretch="true">
            <el-tab-pane label="样式"
                         lazy
                         name="first">
              <el-collapse v-model="styleTabsItem.image">
                <el-collapse-item title="大小"
                                  name="1">
                  <el-form :label-position="labelPosition"
                           label-width="60px"
                           :model="imgFormatData">
                    <el-form-item label="宽">
                      <el-input-number v-model="imgFormatData.width"
                                       controls-position="right"
                                       style="display: inline-block;width: 105px;"
                                       @input="rerecomposeImgWidth"
                                       :min="0"
                                       :step="1"></el-input-number>
                    </el-form-item>
                    <el-form-item label="高">
                      <el-input-number v-model="imgFormatData.height"
                                       controls-position="right"
                                       style="display: inline-block;width: 105px;"
                                       @input="rerecomposeImgWidth"
                                       :min="0"
                                       :step="1"></el-input-number>
                    </el-form-item>
                    <el-form-item label="等比例缩放">
                      <el-input-number v-model="imgFormatData.scaling"
                                       controls-position="right"
                                       style="display: inline-block;width: 105px;"
                                       @input="rerecomposeImgscaling"
                                       :min="1"
                                       :step="0.1"></el-input-number>
                    </el-form-item>
                  </el-form>
                </el-collapse-item>
                <el-collapse-item title="图片"
                                  name="1">
                  <el-form :label-position="labelPosition"
                           label-width="80px"
                           :model="imgFormatData">
                    <el-form-item label=" "
                                  style="padding-top:20px">
                      <el-upload class="avatar-uploader"
                                 action="/pmph/action/flowChartAction/uploadFile"
                                 :show-file-list="false"
                                 :on-success="elAvatarSuccess"
                                 :before-upload="elAvatarUpload">
                        <!-- <img v-if="imgFormatData.xlinkHref "
                             :src="imgFormatData.xlinkHref "
                             class="avatar"> -->
                        <div v-if="imgFormatData.xlinkHref "
                             style="position: relative;">
                          <img :src="imgFormatData.xlinkHref "
                               class="avatar">
                          <i class="el-icon-close"
                             style="position: absolute;op: -11px;right: 0;top:0;"
                             @click="imageRemove"></i>
                        </div>
                        <i v-else
                           class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                  </el-form>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="交互"
                         lazy
                         name="second">
              <el-collapse v-model="styleTabsItem.resource">
                <el-collapse-item title="节点"
                                  name="1">
                  <el-form :label-position="labelPosition"
                           label-width="60px"
                           :model="imgFormatData">
                    <el-form-item label=" "
                                  style="padding-top:20px">
                      <el-input-number @change="recomposeHierarchy(imgFormatData.cell,imgFormatData.hierarchy)"
                                       controls-position="right"
                                       v-model="imgFormatData.hierarchy"
                                       :min="0"></el-input-number>
                    </el-form-item>
                  </el-form>
                </el-collapse-item>
                <el-collapse-item title="交互类型"
                                  name="2">
                  <el-form :label-position="labelPosition"
                           label-width="60px"
                           :model="imgFormatData">
                    <el-radio-group @change="recomposeincident(imgFormatData.cell,imgFormatData.incident)"
                                    v-model="imgFormatData.incident">
                      <el-radio-button v-for="(item,idx) in selectIncident"
                                       :key="idx"
                                       :label="item.label"></el-radio-button>
                    </el-radio-group>
                  </el-form>
                </el-collapse-item>
                <el-collapse-item title="交互数据"
                                  name="3">
                  <el-form :label-position="labelPosition"
                           label-width="60px"
                           :model="imgFormatData">
                    <span v-if="imgFormatData.incident=='文本'">
                      <!-- <el-form-item label="弹出框宽度">
                        <el-input-number v-model="imgFormatData.dialogWidth"
                                         controls-position="right"
                                         style="display: inline-block;width: 105px;"
                                         @input="recomposeDialogWidth(imgFormatData.cell,imgFormatData.dialogWidth)"
                                         :min="0"
                                         :step="1"></el-input-number>
                      </el-form-item>
                      <el-form-item label="弹出框高度">
                        <el-input-number v-model="imgFormatData.dialogHeight"
                                         controls-position="right"
                                         style="display: inline-block;width: 105px;"
                                         @input="recomposeDialogHeight(imgFormatData.cell,imgFormatData.dialogHeight)"
                                         :min="0"
                                         :step="1"></el-input-number>
                      </el-form-item> -->
                      <el-form-item label="背景颜色"
                                    class="borderColor">
                        <el-color-picker v-model="imgFormatData.dialogColor"
                                         show-alpha
                                         :predefine="historyColorData"
                                         @change="recomposeDialogColor(imgFormatData.cell,imgFormatData.dialogColor)">
                        </el-color-picker>
                      </el-form-item>
                      <el-form-item label=""
                                    style="margin-top: 50px;">
                        <el-button @click="openRichTextImgDialog=true">打开富文本编辑器</el-button>
                      </el-form-item>
                    </span>
                    <span v-else>
                      <el-form-item label=""
                                    style="width:100%;margin-top:49px">
                        <el-upload class="avatar-uploader"
                                   action="/pmph/action/flowChartAction/uploadFile"
                                   style="widht:180px"
                                   :show-file-list="false"
                                   :on-success="setImgFormatData"
                                   :before-upload="imageShapesResource">
                          <!-- <img v-if="imgFormatData.incidentData"
                             :src="imgFormatData.incidentData"
                             class="avatar"> -->

                          <div v-if="imgFormatData.incidentData"
                               class="uploadType">
                            <div v-if="imgFormatData.incident=='视频'"
                                 style="position: relative;">
                              <video width="100px" id="idVideoShow"
                                     height="80px">
                                       <source :src="setUrl(imgFormatData.incidentData)">
                              </video>
                              <i class="el-icon-close"
                                 style="position: absolute;op: -11px;right: 0;top:0;"
                                 @click="imageShapesRemove"></i>
                            </div>
                            <div v-if="imgFormatData.incident=='图片'"
                                 style="position: relative;">
                              <img :src="setUrl(imgFormatData.incidentData)"
                                   class="avatar">
                              <i class="el-icon-close"
                                 style="position: absolute;op: -11px;right: 0;top:0;"
                                 @click="imageShapesRemove"></i>
                            </div>
                            <div v-if="imgFormatData.incident=='音频'"
                                 style="position: relative;">
                              <audio controls>
                                <source :src="setUrl(imgFormatData.incidentData)"
                                        type="audio/mpeg">
                              </audio>
                              <i class="el-icon-close"
                                 style="position: absolute;op: -11px;right: 0;top:0;"
                                 @click="imageShapesRemove"></i>
                            </div>
                          </div>
                          <i v-else
                             class="el-icon-plus avatar-uploader-icon" />
                        </el-upload>
                      </el-form-item>
                    </span>

                  </el-form>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 图片样式修改结束 -->
        <!-- 连接线样式修改开始 -->
        <div id="modifyLink">
          <el-tabs v-model="imageTabs"
                   :stretch="true">
            <el-tab-pane label="样式"
                         name="first">
              <el-collapse v-model="styleTabsItem.link">
                <el-collapse-item title="链接线"
                                  name="1">
                  <el-form :label-position="labelPosition"
                           label-width="80px"
                           :model="imgFormatData">
                    <el-form-item label="颜色"
                                  class="backgroundColor">
                      <el-color-picker v-model="linkFormatData.stroke"
                                       show-alpha
                                       :predefine="historyColorData"
                                       @change="recomposeStyle()"></el-color-picker>
                    </el-form-item>
                    <el-form-item label="类型">
                      <el-select @change="recomposeStyle()"
                                 v-model="linkFormatData.linkStyle"
                                 placeholder="请选择">
                        <el-option :class="item.label"
                                   v-for="(item,idx) in selectlinkStyle"
                                   :key="idx"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="线宽">
                      <el-input-number v-model="linkFormatData.thickness"
                                       controls-position="right"
                                       style="display: inline-block;width: 105px;"
                                       @input="recomposeStyle()"
                                       :min="1"
                                       :step="1"
                                       :max="10"></el-input-number>
                    </el-form-item>
                    <el-form-item label="连接方式">
                      <el-select @change="recomposeLinkStroke()"
                                 v-model="linkFormatData.style"
                                 placeholder="请选择">
                        <el-option :class="item.label"
                                   v-for="(item,idx) in linkStyle"
                                   :key="idx"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </el-collapse-item>
                <el-collapse-item title="链接线箭头"
                                  name="1">
                  <el-form :label-position="labelPosition"
                           label-width="80px"
                           :model="imgFormatData">

                    <el-form-item label="前箭头">
                      <el-select @change="recomposeLinkArrowsRight()"
                                 v-model="linkFormatData.BeforeArrow"
                                 placeholder="请选择">
                        <el-option :class="item.label"
                                   v-for="(item,idx) in ArrowType"
                                   :key="idx"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="后箭头">
                      <el-select @change="recomposeLinkArrowsLeft()"
                                 v-model="linkFormatData.AfterArrow"
                                 placeholder="请选择">
                        <el-option :class="item.label"
                                   v-for="(item,idx) in ArrowType"
                                   :key="idx"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </el-collapse-item>
                <el-collapse-item title="文字"
                                  name="2">
                  <el-form :label-position="labelPosition"
                           label-width="80px"
                           :model="imgFormatData">
                    <el-form-item label=""
                                  style="width:100%;margin-top: 40px;">
                      <el-input type="textarea"
                                placeholder="请输入文字内容"
                                @input="recomposeLinkText()"
                                v-model="linkFormatData.text"></el-input>
                    </el-form-item>
                    <el-form-item label="颜色"
                                  class="backgroundColor">
                      <el-color-picker v-model="linkFormatData.color"
                                       show-alpha
                                       :predefine="historyColorData"
                                       @change="recomposeLinkText()"></el-color-picker>
                    </el-form-item>
                    <el-form-item label="字体">
                      <el-select v-model="linkFormatData.fontFamily"
                                 placeholder="请选择"
                                 @change="recomposeLinkText">
                        <el-option :class="item.value"
                                   v-for="(item,idx) in selectFontFamily"
                                   :key="idx"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="字号">
                      <el-input-number v-model="linkFormatData.fontSize"
                                       controls-position="right"
                                       style="display: inline-block;width: 105px;"
                                       @input="recomposeLinkText()"
                                       :min="1"
                                       :max="80"></el-input-number>
                    </el-form-item>
                    <el-form-item label="加粗">
                      <el-select v-model="linkFormatData.fontWeight"
                                 placeholder="请选择"
                                 @input="recomposeLinkText()">
                        <el-option :style="{'font-weight':item.value}"
                                   v-for="(item,idx) in selectFontWeight"
                                   :key="idx"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="倾斜">
                      <el-select v-model="linkFormatData.fontStyle"
                                 placeholder="请选择"
                                 @input="recomposeLinkText()">
                        <el-option :style="{'font-style':item.value}"
                                   class="oblique"
                                   v-for="(item,idx) in fontStyleData"
                                   :key="idx"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
            <!-- <el-tab-pane label="交互"
                         name="second">

            </el-tab-pane> -->
          </el-tabs>
        </div>
        <!-- 连接线样式修改结束 -->
        <!-- 画布修改开始 -->
        <div id="modifyCanvas">
          <el-collapse v-model="styleTabsItem.backdrop">
            <el-collapse-item title="背景色"
                              name="1">
              <el-form :model="CreateCanvas"
                       :inline="true">
                <el-form-item label="颜色">
                  <el-color-picker v-model="CreateCanvas.color"
                                   show-alpha
                                   :predefine="historyColorData"
                                   @change="creationConfirm" />
                </el-form-item>
              </el-form>
            </el-collapse-item>
            <el-collapse-item title="背景图片"
                              name="2"
                              class="createCanvasImage">
              <el-form :model="CreateCanvas"
                       :inline="true">
                <el-form-item label="图片">
                  <el-upload class="avatar-uploader"
                             action="/pmph/action/flowChartAction/uploadFile"
                             style="widht:180px"
                             :show-file-list="false"
                             :on-success="handleAvatarSuccess"
                             :before-upload="beforeAvatarUpload">
                    <div v-if="CreateCanvas.imageUrl"
                         style="position: relative;">
                      <img :src="CreateCanvas.imageUrl"
                           class="avatar">
                      <i class="el-icon-close"
                         style="position: absolute;top: 0;right: 0"
                         @click="removeCanvasImageUrl"></i>
                    </div>
                    <i v-else
                       class="el-icon-plus avatar-uploader-icon" />
                  </el-upload>
                </el-form-item>
              </el-form>
            </el-collapse-item>
            <el-collapse-item title="大小"
                              class="createCanvasSize"
                              name="3">
              <el-form :model="CreateCanvas">
                <el-form-item label="宽度">
                  <el-input v-model="CreateCanvas.width"
                            @blur="creationConfirm"
                            autocomplete="off" />
                </el-form-item>
                <el-form-item label="高度">
                  <el-input v-model="CreateCanvas.height"
                            @blur="creationConfirm"
                            :min="0"
                            :max="999999"
                            autocomplete="off" />
                </el-form-item>
              </el-form>
            </el-collapse-item>
          </el-collapse>
        </div>
        <!-- 画布修改结束 -->
      </el-main>
    </el-container>
    <!-- 创建画布弹窗 -->
    <el-dialog title="创建画布"
               :visible.sync="dialogFormVisible"
               width="400px"
               :close-on-click-modal="false"
               :show-close="false"
               :close-on-press-escape="false">
      <el-form :model="CreateCanvas"
               :inline="true">
        <el-form-item label="画布宽度">
          <el-input v-model="CreateCanvas.width"
                    autocomplete="off" />
        </el-form-item>
        <el-form-item label="画布高度">
          <el-input v-model="CreateCanvas.height"
                    autocomplete="off" />
        </el-form-item>
        <el-form-item label="背景颜色">
          <el-color-picker v-model="CreateCanvas.color"
                           show-alpha
                           :predefine="historyColorData"
                           class="createCanvasWrap" />
        </el-form-item>
        <el-form-item label="背景图片">
          <el-upload class="avatar-uploader"
                     action="/pmph/action/flowChartAction/uploadFile"
                     style="widht:180px"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="CreateCanvas.imageUrl"
                 :src="CreateCanvas.imageUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="creationCancel">取 消</el-button>
        <el-button type="primary"
                   @click="creationConfirm">确 定
        </el-button>
      </div>
    </el-dialog>
    <!-- 保存数据填写 -->
    <el-dialog title="保存流程图"
               :visible.sync="openSeav"
               :close-on-click-modal="false"
               :show-close="false"
               :close-on-press-escape="false">
      <el-form :model="seavData"
               :rules="rules"
               ref="saveForm"
               label-width="100px"
               class="demo-ruleForm">
        <el-form-item label="名称"
                      prop="resourceName">
          <el-input v-model="seavData.resourceName"
                    :disabled="nameEnable"
                    @blur="queryNotExistSameName"></el-input>
        </el-form-item>
        <el-form-item label="所属项目"
                      prop="resourceType">
          <el-select v-model="seavData.resourceType"
                     filterable
                     allow-create
                     placeholder="请选择所属项目">
            <el-option :label="item.label"
                       v-for="(item,idx) in resourceTypeData"
                       :value="item.label"
                       :key="idx"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="科学分类"
                      prop="scientificType">
          <el-select v-model="seavData.scientificType"
                     filterable
                     allow-create
                     placeholder="请选择科学分类">
            <el-option :label="item.label"
                       :value="item.label"
                       v-for="(item,idx) in scientificTypeData"
                       :key="idx"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据"
                      prop="resource">
          <el-input type="textarea"
                    :disabled="true"
                    v-model="seavData.resource"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     :style="{ display:commitEnable }"
                     @click="submitForm('saveForm',0,'','save')">保存
          </el-button>
          <el-button :style="{ display:auditEnable }"
                     type="primary"
                     @click="submitForm('saveForm',1,'','save')">保存
          </el-button>
          <el-button :style="{ display:releasedEnable }"
                     @click="submitForm('saveForm',8,'','')"
                     type="primary">保存
          </el-button>
          <el-button :style="{ display:commitEnable }"
                     @click="submitForm('saveForm',1,'','commit')">提交</el-button>
          <el-button :style="{ display:auditEnable }"
                     @click="submitForm('saveForm',2,'','pass')">审核通过</el-button>
          <el-button :style="{ display:resetEnable }"
                     @click="rebut"
                     type="danger">驳回</el-button>
          <el-button @click="resetForm('saveForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 富文本框 -->
    <el-dialog title="富文本"
               :close-on-click-modal="false"
               :show-close="false"
               width="80%"
               :visible.sync="openRichTextDialog">
      <div>
        <quill-editor ref="text"
                      v-model="modifyFormatData.incidentData"
                      class="myQuillEditor"
                      :options="editorOption" />
        <el-button type="primary"
                   style="margin-top:50px"
                   @click="recomposeincidentData(modifyFormatData.cell,modifyFormatData.incidentData)">提交
        </el-button>
        <el-button style="margin-top:50px"
                   @click="openRichTextDialog=false">取消
        </el-button>
      </div>
    </el-dialog>
    <!-- 图片元素富文本框 -->
    <el-dialog title="富文本"
               :close-on-click-modal="false"
               :show-close="false"
               width="80%"
               :visible.sync="openRichTextImgDialog">
      <div>
        <quill-editor ref="text"
                      v-model="imgFormatData.incidentData"
                      class="myQuillEditor"
                      :options="editorOption" />
        <el-button type="primary"
                   style="margin-top:50px"
                   @click="recomposeincidentData(imgFormatData.cell,imgFormatData.incidentData)">提交
        </el-button>
        <el-button style="margin-top:50px"
                   @click="openRichTextImgDialog=false">取消
        </el-button>
      </div>
    </el-dialog>
    <!-- 右键 -->
    <ul v-show="visible"
        :style="{left:left+'px',top:top+'px'}"
        class="contextmenu">
      <li @click="atTheTop">置于顶层</li>
      <li @click="atTheBottom">置于底层</li>
    </ul>
    <el-dialog :visible.sync="rejectVisible"
               title="驳回"
               width="30%">
      <el-input type="textarea"
                v-model="reject"></el-input>
      <span class="dialog-footer"
            slot="footer">
        <el-button @click="rejectVisible = false">取 消</el-button>
        <el-button @click="saveReject"
                   type="primary">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 导航 -->
    <div id="navigator"></div>
  </el-container>
</template>

<script>
import Workflow from "./Workflow";
import basicComponents from "./component/basicComponents"; // 基础元件
import stencilItem from "./component/stencilItem"; // 自定义元件
import themeItem from "./component/theme"; // 自定义元件
import { quillEditor } from "vue-quill-editor"; //富文本
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  name: "JointJS",
  data () {
    return {
      editorOption: {
        placeholder: '请输入文本...',
        action: "/pmph/action/flowChartAction/uploadFile", // 必填参数 图片上传地址
        methods: "post", // 必填参数 图片上传方式
        // token: "", // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
        name: "upload_file", // 必填参数 文件的参数名
        // size: 500, // 可选参数   图片大小，单位为Kb, 1M = 1024Kb
        accept:
          "multipart/form-data, image/png, image/gif, image/jpeg, image/bmp, image/x-icon,image/jpg", // 可选 可上传的图片格式
      },
      videos: "",
      audios: "",
      video: require("./image/video_btn.png"),
      audio: require("./image/audio_btn.png"),
      logo: require("./image/logo.svg"),
      openRichTextImgDialog: false,
      fullscreen: false, //判断全屏
      fullscreenClass: "icon iconfont icon-quanping",
      headerSelect: "100%",
      styleTabs: "first",
      imageTabs: "first",
      styleTabsItem: {
        backdrop: ["1", "2", "3", "4"],
        resource: ["1", "2", "3"],
        image: ["1"],
        link: ["1", "2"],
      },
      cells: "",
      // 右键
      visible: false,
      top: 0,
      left: 0,
      /* *****dialog Data Start***** */
      amend: false, //修改画布标识
      openRichTextDialog: false,
      dialogFormVisible: false,
      CreateCanvas: {
        width: 1080,
        height: 1920,
        color: "#ffffff",
        imageUrl: "",
      },
      openSeav: false,
      seavData: {
        id: "",
        resourceName: "",
        resourceType: [],
        resource: "",
        scientificType: [],
      },
      nameEnable: false,
      rules: {
        resourceName: [
          { required: true, message: "请输入资源名称", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        resourceType: [
          { required: true, message: "请选择所属项目", trigger: "change" },
        ],
        scientificType: [
          { required: true, message: "请选择科学分类", trigger: "change" },
        ],
        resource: [
          {
            required: true,
            message: "资源数据为空，请检查资源",
            trigger: "blur",
          },
        ],
      },
      openPhoto: false,
      createPhoto: "",
      /* *****dialog Data End***** */
      /* *****header Data Start***** */
      zoomNum: 100,
      disabled: false,
      graphInstance: "",
      activeNames: ["1"],
      resourceTypeData: [],
      scientificTypeData: [],
      /* *****header Data End***** */
      /* *****canvas Data Start***** */
      labelPosition: "top",
      modifyFormatData: {
        cell: null,
        width: 0,
        height: 0,
        hierarchy: "", // 节点
        incident: "", // 事件
        incidentData: "", // 事件数据
        dialogWidth: 0, // 弹出框样式
        dialogHeight: 0, // 弹出框样式
        dialogColor: "", // 弹出框样式
        stroke: "", // 边框颜色
        fillOpacity: "", // 透明度
        bodyfill: "", // 背景颜色
        strokeDasharray: "", // 边框样式
        rx: "", // 边框圆角
        strokeWidth: "", // 边框大小
        text: "", // 文字内容
        fontSize: "", // 文字大小
        labelfill: "", // 文字颜色
        fontWeight: "", // 文字粗细
        fontFamily: "", // 文字字体
        fontStyle: "", //文字倾斜
        fontAlign: "", //对齐
        letterSpacing: "", //字间距
        transformX: "", //文字位置X
        transformY: "", //文字位置Y
        textOpacity: "",
        isNone: "block",
        filter: {
          dx: 0,
          dy: 0,
          blur: 0,
        }, // 阴影
      },
      imgFormatData: {
        cell: null,
        width: "",
        height: "",
        scaling: 1,
        xlinkHref: "",
        hierarchy: "",
        incident: "",
        incidentData: "",
        dialogWidth: 0, // 弹出框样式
        dialogHeight: 0, // 弹出框样式
        dialogColor: "", // 弹出框样式
      },
      linkFormatData: {
        cell: null,
        style: "",
        thickness: 1,
        linkStyle: "",
        stroke: "",
        color: "",
        fontSize: 0,
        fontWeight: "",
        fontStyle: "",
        fontFamily: "",
        text: "",
        hierarchy: "",
        incident: "",
        incidentData: "",
        BeforeArrow: "",
        AfterArrow: "",
      },
      // 下拉框数据 video/Audio/text/none
      selectIncident: [
        { label: "视频", value: "video" },
        { label: "音频", value: "audio" },
        { label: "图片", value: "image" },
        { label: "文本", value: "text" },
      ],
      selectStrokeDasharray: [
        { label: "——", value: "1,0" },
        { label: ".........", value: "5,5" },
        { label: "-----", value: "10,10" },
      ],
      selectFontFamily: [
        { label: "宋体", value: "SimSun" },
        { label: "黑体", value: "SimHei" },
        { label: "微软雅黑", value: "Microsoft YaHei" },
        {
          label: "萍方-简",
          value: "PingFangSC-Regular,PingFang SC",
        },
      ],
      selectFontWeight: [
        { label: "加粗", value: "bold" },
        { label: "更细", value: "100" },
        { label: "无", value: "Normal" },
      ],
      linkStyle: [
        { label: "直角", value: "normal" },
        { label: "圆角", value: "rounded" },
        { label: "贝塞尔曲线", value: "smooth" },
        { label: "交差", value: "jumpover" },
      ],
      selectlinkStyle: [
        { label: "——", value: "1,0" },
        { label: ".........", value: "5,5" },
        { label: "-----", value: "10,10" },
      ],
      fontStyleData: [
        { label: "倾斜", value: "oblique" },
        { label: "无", value: "Normal" },
      ],
      ArrowType: [
        { label: "有", value: 1 },
        { label: "无", value: 0 },
      ],
      alignData: [
        { label: "左", value: "start" },
        { label: "中", value: "middle" },
        { label: "右", value: "end" },
      ],
      /* *****canvas Data End***** */
      /* headerSelect */
      headerSelectData: [
        { label: "10%", value: "0.1" },
        { label: "20%", value: "0.2" },
        { label: "30%", value: "0.3" },
        { label: "40%", value: "0.4" },
        { label: "50%", value: "0.5" },
        { label: "60%", value: "0.6" },
        { label: "70%", value: "0.7" },
        { label: "80%", value: "0.8" },
        { label: "90%", value: "0.9" },
        { label: "100%", value: "0.95" },
        { label: "110%", value: "1.1" },
        { label: "120%", value: "1.2" },
        { label: "130%", value: "1.3" },
        { label: "140%", value: "1.4" },
        { label: "150%", value: "1.5" },
      ],
      commitEnable: "",
      auditEnable: "",
      resetEnable: "",
      showStatus: "",
      releasedEnable: "",
      rejectVisible: false,
      reject: "",
      historyColorData: []
    };
  },
  watch: {
    visible (value) {
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
    fullscreenClass (val) {
      this.fullscreenClass = val;
    },
    fullscreen (val) {
      this.fullscreen = val;
    },
  },
  created () {
    let hisColor = localStorage.getItem('historyColor')
    if (hisColor != null) {
      let values = hisColor.split('-')
      this.historyColorData = values.sort((a, b) => b - a).slice(0, 10);

    }
    if (this.$route.query.showStatus === 'new') {
      this.auditEnable = 'none'
      this.resetEnable = 'none'
      this.releasedEnable = 'none'
      this.commitEnable = ''
    } else if (this.$route.query.showStatus === 'released') {
      this.auditEnable = 'none'
      this.resetEnable = 'none'
      this.commitEnable = 'none'
      this.releasedEnable = ''
    } else {
      this.auditEnable = ''
      this.resetEnable = ''
      this.commitEnable = 'none'
      this.releasedEnable = 'none'
    }
    if (this.$route.query.enableCreate === '1') {
      this.seavData.resourceName = this.$route.query.itemName
      this.nameEnable = false
    } else {
      this.seavData.resourceName = this.$route.query.itemName
      this.nameEnable = true
    }
    this.showStatus = this.$route.query.showStatus
    $("body").css({ margin: "0", overflow: "hidden" });
    // window.onbeforeunload = onbeforeunloadHandler;

    // function onbeforeunloadHandler () {
    //   var warning = "系统可能不会保存您所做的更改。";
    //   return warning;
    // }

    if (this.$route.query.id != undefined) {
      this.dialogFormVisible = false;
      this.axios
        .get("/pmph/action/flowChartAction/selectDetailById", {
          params: {
            id: this.$route.query.id,
            status: this.$route.query.status,
          },
        })
        .then((response) => {
          console.log(response);
          let pram = response.data.chartJson;
          this.cells = JSON.parse(pram.json);
          this.seavData.id = response.data.id;
          this.seavData.resourceName = response.data.flowName;
          this.seavData.resourceType = response.data.belongingItemName;
          this.seavData.scientificType = response.data.scienceTagName;
          this.CreateCanvas.width = pram.width;
          this.CreateCanvas.height = pram.height;
          this.CreateCanvas.color = pram.color;
          this.CreateCanvas.image = pram.imageUrl;
          this.init(pram.width, pram.height, pram.color, pram.imageUrl, false);
          this.graphInstance.current.setFromData(this.cells);
          this.getcanvasSize();
        })
        .catch((error) => {
          this.$message.error("数据获取失败");
        });
    }
  },
  mounted () {
    let that = this;
    window.onresize = function () {
      if (that.isFullscreenEnabled()) {
        that.fullscreenClass = "icon iconfont icon-tuichuquanping";
        that.fullscreen = !that.fullscreen;
      } else {
        that.fullscreenClass = "icon iconfont icon-quanping";
        that.fullscreen = !that.fullscreen;
      }
    };
    window.clickSaveJson = this.clickSaveJson;
    window.getcanvasSize = this.getcanvasSize;
    window.getElFormatData = this.getElFormatData;
    window.getElFormatImgData = this.getElFormatImgData;
    window.getElFormatLinkData = this.getElFormatLinkData;
    window.openMenu = this.openMenu;
    window.setscaleplate = this.setscaleplate;
    this.init(
      this.CreateCanvas.width,
      this.CreateCanvas.height,
      this.CreateCanvas.color,
      this.CreateCanvas.imageUrl,
      false
    );
    // this.setscaleplate();
  },
  methods: {
    // 打开富文本
    openRichTextFun () {
      this.openRichTextDialog = true;
    },
    // 添加标尺
    setscaleplate () {
      $("#scaleplate").empty();
      let height = $(".paper-scroller-background .joint-paper").height();
      let width = $(".paper-scroller-background .joint-paper").width();
      // setTimeout(() => {
        $(".joint-paper-scroller").css({
          width: width + 10,
          height: height,
        });
        $(".paper-scroller-background .joint-paper").css({ top: 0, left: 0 });
        $(".paper-scroller-background").width(width);
        $(".paper-scroller-background").height(height);
      // }, 100);

      //  标尺
      $("#scaleplate").width(width + 10);
      for (let i = 0; i < width / 10; i++) {
        if (i % 10 == 0) {
          $("#scaleplate").append("<li class='ten'>" + i * 10 + "</li>");
        } else {
          $("#scaleplate").append("<li></li>");
        }
      }
    },
    // 右键
    openMenu (e, cellView) {
      var x = e.pageX;
      var y = e.pageY;
      this.top = y;
      this.left = x;
      this.visible = true;
    },
    closeMenu () {
      this.visible = false;
    },
    /* **********创建画布弹框操作********** */
    // 弹框确定
    creationConfirm () {
      this.dialogFormVisible = false;
      let width = this.CreateCanvas.width;
      let height = this.CreateCanvas.height;
      const color = this.CreateCanvas.color;
      const image = this.CreateCanvas.imageUrl;
      this.historyColor(color)
      if (height > 20000) {
        height = 20000;
        this.CreateCanvas.height = 20000;
      }

      if (width > 20000) {
        width = 20000;
        this.CreateCanvas.width = 20000;
      }

      // (宽、高、颜色、背景图)
      this.init(width, height, color, image, true);
      this.setscaleplate();
    },
    // 弹框取消
    creationCancel () {
      window.close();
    },
    //  背景图操作
    handleAvatarSuccess (res, file) {
      this.CreateCanvas.imageUrl = this.blankFun(res.path);
      this.creationConfirm();
    },
    // 背景图上传
    beforeAvatarUpload (file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 1000000000000;
      if (!isJPG) {
        this.$message.error("上传背景图片只能是 JPG、PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 10MB!");
      }
      return isJPG && isLt2M;
    },
    // 删除背景图片
    removeCanvasImageUrl (evt) {
      evt.stopPropagation();
      this.CreateCanvas.imageUrl = "";
      this.init(
        this.CreateCanvas.width,
        this.CreateCanvas.height,
        this.CreateCanvas.color,
        this.CreateCanvas.imageUrl,
        true
      );
    },
    /* **********画布生成开始********** */
    init (width, height, color, image, reset) {
      if (color == "" || color == undefined) {
        color = "";
      }
      if (image == "" || image == undefined) {
        image = "";
      }
      this.graphInstance = this.$refs;
      const dom = document.getElementById("workflowPaper");
      $("#workflowPaper").empty();
      const config = {
        width: width,
        height: height,
        color: color,
        image: image,
        gridSize: 5,
      };
      this.graphInstance.current = new Workflow(dom, config);
      const basicEl = document.getElementById("workflowStencil");
      const custom = document.getElementById("custom");
      const theme = document.getElementById('theme')
      $("#workflowStencil").empty();
      $("#custom").empty();
      $("#theme").empty();
      this.graphInstance.current.addStencil(basicEl, basicComponents);
      this.graphInstance.current.addStencil(custom, stencilItem);
      this.graphInstance.current.addStencil(theme, themeItem);
      this.graphInstance.current.addSelection();
      // 判断是否为修改画布
      if (reset) {
        let json = localStorage.getItem("autoSaveJson");
        if (json != null) {
          this.graphInstance.current.setFromData(JSON.parse(json));
        }
      } else {
        localStorage.removeItem("autoSaveJson");
        // 每秒自动保存，防止出现问题丢失
        setInterval(() => {
          localStorage.setItem(
            "autoSaveJson",
            JSON.stringify(this.graphInstance.current.getData())
          );
        }, 1000);
      }
      // // 判断是否为修改流程图
      if (this.$route.query.id != undefined) {
        // this.graphInstance.current.setFromData(this.cells)
      }
        this.setscaleplate();
    },
    setCanvas () {
      this.amend = true;
      this.dialogFormVisible = true;
    },
    // 获取元素属性数据
    getElFormatData (data) {
      this.modifyFormatData = data;
    },
    getElFormatImgData (data) {
      this.imgFormatData = data;
      // 把宽高放本地，方便实现图片等比例缩放
      window.sessionStorage.setItem("imageFormatData", JSON.stringify(data));
    },
    getElFormatLinkData (data) {
      this.linkFormatData = data;
    },
    getcanvasSize () {
      this.CreateCanvas.width = $(".el-main .joint-paper").width();
      this.CreateCanvas.height = $(".el-main .joint-paper").height();
    },
    /* **********元素属性修改开始********** */
    rerecomposeWidth () {
      try {
        let cell = this.modifyFormatData.cell;
        let val = {
          width: this.modifyFormatData.width,
          height: this.modifyFormatData.height,
          fontAlign:this.modifyFormatData.fontAlign
        };
        this.graphInstance.current.changeWidth(cell, val);
      } catch (error) {
      }
    },
    rerecomposeImgWidth () {
      try {
        let cell = this.imgFormatData.cell;
        let val = {
          width: this.imgFormatData.width,
          height: this.imgFormatData.height,
        };
        this.graphInstance.current.changeWidth(cell, val);
      } catch (error) {
      }
    },
    // 图片等比例放大
    rerecomposeImgscaling () {
      let scaling = this.imgFormatData.scaling;
      if (sessionStorage.getItem("imageFormatData")) {
        let width = JSON.parse(sessionStorage.getItem("imageFormatData")).width;
        let height = JSON.parse(sessionStorage.getItem("imageFormatData"))
          .height;
        if (scaling != undefined) {
          this.imgFormatData.width = parseInt(width * scaling);
          this.imgFormatData.height = parseInt(height * scaling);
          this.rerecomposeImgWidth();
        }
      }
    },
    recomposeBodyFill (cell, val) {
      this.historyColor(val)
      // 背景颜色
      try {
        this.graphInstance.current.changeBodyFill(cell, val);
      } catch (error) {
      }
    },
    recomposeBorderColor (cell, val) {
      this.historyColor(val)
      try {
        this.graphInstance.current.changeBorderColor(cell, val);
      } catch (error) {
      }
    },
    recomposeFillOpacity (cell, val) {
      // 透明度
      try {
        this.graphInstance.current.changeFillOpacity(cell, val);
      } catch (error) {
      }
    },
    recomposeStrokeWidth (cell, val) {
      // 边框大小
      try {
        this.graphInstance.current.changeStrokeWidth(cell, val);
      } catch (error) {
      }
    },
    recomposeStrokeDasharray (cell, val) {
      // 边框样式
      this.graphInstance.current.changeStrokeDasharray(cell, val);
    },
    recomposeRx (cell, val) {
      // 边框圆角
      try {
        this.graphInstance.current.changeRx(cell, val);
      } catch (error) {
      }
    },
    recomposeText (cell, val) {
      // TODO文字内容
      this.graphInstance.current.changeText(cell, val);
    },
    recomposeFontSize (cell, val) {
      // 文字大小
      try {
        this.graphInstance.current.changeFontSize(cell, val);
      } catch (error) {
      }
    },
    recomposeLabelFill (cell, val) {
      // 文字颜色
      this.historyColor(val)
      this.graphInstance.current.changeLabelFill(cell, val);
    },
    recomposeFontWeight (cell, val) {
      // 文字样式
      this.graphInstance.current.changeFontWeight(cell, val);
    },
    recomposeFontFamily (cell, val) {
      // 文字字体
      this.graphInstance.current.changeFontFamily(cell, val);
    },
    recomposeFontStyle (cell, val) {
      // 文字字体
      this.graphInstance.current.changeFontStyle(cell, val);
    },
    recomposeFontAlign (cell, val) {
      //对齐
      this.graphInstance.current.changeFontalign(cell, val);
    },
    recomposeTextOpacity (cell, val) {
      try {
        this.graphInstance.current.changeTextOpacity(cell, val);
      } catch (error) {
      }
    },
    recomposeletterSpacing (cell, val) {
      try {
        this.graphInstance.current.changeletterSpacing(cell, val);
      } catch (error) {
      }
    },
    recomposeFontLocation () {
      try {
        let cell = this.modifyFormatData.cell;
        let val = {
          x: this.modifyFormatData.transformX,
          y: this.modifyFormatData.transformY,
        };
        this.graphInstance.current.changeFontLocation(cell, val);
      } catch (error) {
      }
    },
    recomposeFilter (cell, val) {
      // 元素阴影
      let data = {
        dx: val.dx,
        dy: val.dy,
        blur: val.blur,
      };
      try {
        this.graphInstance.current.changeFilter(cell, data);
      } catch (error) {
      }
    },
    recomposeHierarchy (cell, val) {
      // 资源节点
      this.graphInstance.current.changeHierarchy(cell, val);
    },
    recomposeincident (cell, val) {
      // 资源类型
      this.imgFormatData.incidentData = "";
      this.modifyFormatData.incidentData = "";
      this.graphInstance.current.changeIncident(cell, val);
    },
    recomposeincidentData (cell, val) {
      this.openRichTextDialog = false;
      this.openRichTextImgDialog = false;
      this.graphInstance.current.changeIncidentData(cell, val);
    },
    recomposexlinkHref (cell, val) {
      this.graphInstance.current.changexlinkHref(cell, val);
    },
    recomposeIsNone (cell, val) {
      this.graphInstance.current.changeIsNone(cell, val);
    },
    // link
    recomposeStyle () {
      try {
        let cell = this.linkFormatData.cell;
        let stroke = this.linkFormatData.stroke;
        let dasharray = this.linkFormatData.linkStyle;
        let width = this.linkFormatData.thickness;
        this.recomposeLinkArrowsLeft();
        this.recomposeLinkArrowsRight();

        console.log('dasharray', dasharray);
        this.graphInstance.current.changeLink(cell, stroke, dasharray, width);
      } catch (error) {
      }
    },
    recomposeLinkStroke () {
      let cell = this.linkFormatData.cell;
      let style = this.linkFormatData.style;
      console.log(style);
      this.graphInstance.current.changeLinkType(cell, style);
    },
    recomposeLinkText () {
      try {
        let cell = this.linkFormatData.cell;
        let data = {
          text: this.linkFormatData.text,
          fontSize: this.linkFormatData.fontSize,
          color: this.linkFormatData.color,
          fontWeight: this.linkFormatData.fontWeight,
          fontStyle: this.linkFormatData.fontStyle,
          fontFamily: this.linkFormatData.fontFamily,
        };
        this.graphInstance.current.changeLinkWordage(cell, data);
      } catch (error) {
      }
    },
    recomposeLinkFontFamily (cell, val) {
      this.graphInstance.current.changeFontFamily(cell, val);
    },
    recomposeLinkArrowsLeft () {
      let linkCell = this.linkFormatData.cell;
      let type = this.linkFormatData.AfterArrow;
      let color = this.linkFormatData.stroke;
      this.graphInstance.current.changeArrowsLeft(linkCell, type, color);
    },
    recomposeLinkArrowsRight () {
      let linkCell = this.linkFormatData.cell;
      let type = this.linkFormatData.BeforeArrow;
      let color = this.linkFormatData.stroke;
      this.graphInstance.current.changeArrowsRight(linkCell, type, color);
    },
    // 基本图形资源上传
    setIncidentData (res, file) {
      this.modifyFormatData.incidentData = res.path;
        if(file.raw.type=='video/mp4'){
          let data= {
            src: this.setUrl(res.path),
            type: file.raw.type
          }
                this.appendVideo(data)
          }
      this.recomposeincidentData(
        this.modifyFormatData.cell,
        this.modifyFormatData.incidentData
      );
    },
    // 基本图形交互数据上传验证
    baiscShapesResource (file) {
      let isType = false;
      if (this.modifyFormatData.incident == "视频") {
        isType = file.type == "video/mp4";
        this.videos = this.video;
      }
      if (this.modifyFormatData.incident == "音频") {
        isType = file.type == "video/ogg" || file.type == "audio/mpeg";
        this.audios = this.audio;
      }
      if (this.modifyFormatData.incident == "图片") {
        isType =
          file.type === "image/jpeg" ||
          file.type === "image/gif" ||
          file.type === "image/png";
      }
      const isJPG = isType;
      const isLt2M = file.size / 1024 / 1024 < 1000000000000;
      if (!isJPG) {
        if (!isJPG) {
          if (this.modifyFormatData.incident == "视频") {
            this.$message.error("上传视频只能是MP4格式!");
          }
          if (this.modifyFormatData.incident == "音频") {
            this.$message.error("上传音频只能是MP3格式!");
          }
          if (this.modifyFormatData.incident == "图片") {
            this.$message.error("上传图片只能是 JPG、PNG 、GIF格式!");
          }
        }
      }
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 10MB!");
      }
      return isJPG && isLt2M;
    },
    // 基本图形资源删除
    baiscShapesRemove (evt) {
      evt.stopPropagation();
      this.audios = "";
      this.videos = "";
      this.modifyFormatData.incidentData = "";
      let cell = this.modifyFormatData.cell;
      let val = "";
      this.recomposeincident(cell, val);
      this.recomposeincidentData(cell, val);
    },
    // 图片图形资源上传
    setImgFormatData (res, file) {
    if(file.raw.type=='video/mp4'){
   let data= {
     src: this.setUrl(res.path),
     type: file.raw.type
   }
         this.appendVideo(data)
   }
      this.imgFormatData.incidentData = res.path;

      this.recomposeincidentData(
        this.imgFormatData.cell,
        this.imgFormatData.incidentData
      );
    },
    // 图片图形资源验证
    imageShapesResource (file) {
      let isType = false;
      if (this.imgFormatData.incident == "视频") {
        isType = file.type == "video/mp4";
        this.videos = this.video;
      }
      if (this.imgFormatData.incident == "音频") {
        isType = file.type == "video/ogg" || file.type == "audio/mpeg";
        this.audios = this.audio;
      }
      if (this.imgFormatData.incident == "图片") {
        isType =
          file.type === "image/jpeg" ||
          file.type === "image/gif" ||
          file.type === "image/png";
      }

      const isJPG = isType;
      const isLt2M = file.size / 1024 / 1024 < 1000000000000;
      if (!isJPG) {
        if (this.imgFormatData.incident == "视频") {
          this.$message.error("上传视频只能是MP4格式!");
        }
        if (this.imgFormatData.incident == "音频") {
          this.$message.error("上传音频只能是MP3格式!");
        }
        if (this.imgFormatData.incident == "图片") {
          this.$message.error("上传图片只能是 JPG、PNG 、GIF格式!");
        }
      }
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 10MB!");
      }
      return isJPG && isLt2M;
    },
    // 图形图片资源删除
    imageShapesRemove (evt) {
      evt.stopPropagation();
      this.audios = "";
      this.videos = "";
      this.imgFormatData.incidentData = "";
      let cell = this.imgFormatData.cell;
      let val = "";
      this.recomposeincident(cell, val);
      this.recomposeincidentData(cell, val);
    },
    // 文字弹出框样式
    recomposeDialogWidth (cell, val) {
      try {
        this.graphInstance.current.changedialogWidth(cell, val);
      } catch (error) {
      }
    },
    recomposeDialogHeight (cell, val) {
      try {
        this.graphInstance.current.changedialogHeight(cell, val);
      } catch (error) {
      }
    },
    recomposeDialogColor (cell, val) {
      this.historyColor(val)
      try {
        this.graphInstance.current.changedialogColor(cell, val);
      } catch (error) {
      }
    },
    /* **********元素属性修改开始********** */
    /* **********header操作开始********** */
    // 是否显示提示
    isShowAlert () {
      this.disabled = !this.disabled;
    },
    // 缩放
    zoom (val) {
      console.log(val);
      this.graphInstance.current.zoom(val);
      this.setscaleplate();
    },
    // 清除
    clert () {
      this.graphInstance.current.clear();
    },
    // 撤销
    revocation () {
      this.graphInstance.current.undo();
    },
    // 反撤销
    theUndo () {
      this.graphInstance.current.redo();
    },
    // 全屏
    full (that) {
      that.graphInstance.current.fullScreen();
    },
    //  退出全屏
    exitFull () {
      this.graphInstance.current.exitFullscreen();
    },
    // 全屏切换
    fullExitFull () {
      if (this.fullscreen == false) {
        this.graphInstance.current.fullScreen();
      } else {
        this.graphInstance.current.exitFullscreen();
      }
      // this.fullscreen = !this.fullscreen
    },
    isFullscreenEnabled () {
      if (
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullscreenElement
      ) {
        return true;
      } else {
        return false;
      }
    },

    // 预览
    Look () {
      let lookData = {
        json: this.graphInstance.current.getData(),
        color: this.CreateCanvas.color,
        width: this.CreateCanvas.width,
        height: this.CreateCanvas.height,
        image: this.CreateCanvas.imageUrl,
      };
      localStorage.setItem("lookData", JSON.stringify(lookData));
      let routeUrl = this.$router.resolve({
        path: "/flowchart/ViewFlowChart",
        // query: {id:96}
      });
      window.open(routeUrl.href, "_blank");
    },
    // 预览图片
    getPNG () {
      // this.openPhoto = true;
      let _this = this;
      this.graphInstance.current.getPNG().toPNG(function (e) {
        _this.createPhoto = e;
      });
    },
    // 下载图片
    openAsSVG () {
      this.graphInstance.current.openAsSVG();
    },
    //  点击header保存按钮
    clickSaveJson () {
      this.getSubmitType();
      this.getScientificClassify();
      this.seavData.resource = JSON.stringify(
        this.graphInstance.current.getData()
      );
      this.openSeav = true;
    },
    // 判断流程图名字是否存在
    queryNotExistSameName () {
      this.axios
        .get("/pmph/action/flowChartAction/selectNotExistSameName", {
          params: {
            flowName: this.seavData.resourceName,
            id: this.seavData.id,
          },
        })
        .then((response) => {
          if (!response.data) {
            this.seavData.resourceName = "";
            this.$message.error("流程图名称已经存在");
          }
        })
        .catch((error) => {
          this.$message.error("服务器异常");
        });
    },
    saveReject: function () {
      let _this = this;
      if (!this.reject) {
        this.$message.warning("请填写驳回原因");
        return
      }
      this.rejectVisible = false
      this.openSeav = false;
      let param = new URLSearchParams();
      param.append("id", this.seavData.id)
      param.append("reject", this.reject)
      this.axios.post('/pmph/action/flowChartAction/rejectFlowChart', param)
        .then((response) => {
            setTimeout(() => {
              _this.creationCancel();
            }, 800);

        });

    },
    rebut () {
      this.$prompt('请输入驳回原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /.+/,
        inputErrorMessage: '驳回原因不能为空'
      }).then(({ value }) => {
        this.submitForm('saveForm', 3, value, 'reject')
      })
    },
    // 点击保存弹窗确定按钮

    submitForm (el, status, value, type) {
      let _this = this;
      this.$refs[el].validate((valid) => {
        if (valid) {
          let chartJson = {
            width: this.CreateCanvas.width,
            height: this.CreateCanvas.height,
            color: this.CreateCanvas.color,
            imageUrl: this.CreateCanvas.imageUrl,
            json: this.seavData.resource,
          };
          let scientificTypeId = "";
          let resourceTypeId = "";
          for (let i = 0; i < this.scientificTypeData.length; i++) {
            if (this.scientificTypeData[i].label === this.seavData.scientificType) {
              scientificTypeId = this.scientificTypeData[i].value;
            }
          }
          for (let i = 0; i < this.resourceTypeData.length; i++) {
            if (this.resourceTypeData[i].label === this.seavData.resourceType) {
              resourceTypeId = this.resourceTypeData[i].value;
            }
          }
          let saveStatus = ""
          if (this.$route.query.itemStatus) {
            saveStatus = this.$route.query.itemStatus
          } else {
            saveStatus = status
          }
          if (this.seavData.id === "") {
            this.saveFlowChart(scientificTypeId, this.seavData, resourceTypeId, `${JSON.stringify(chartJson)}`
              , saveStatus, this.$route.query, value)
          } else {
            if (type === 'pass') {
              this.$confirm('此操作会把知识传递给下一个审核人或完成审核流程，从而无法再编辑此知识，您确定要这样做吗？',
                '请确认操作', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
              }).then(() => {
                this.saveFlowChart(scientificTypeId, this.seavData, resourceTypeId, `${JSON.stringify(chartJson)}`
                  , saveStatus, this.$route.query, value, type)
              })
            } else {
              this.saveFlowChart(scientificTypeId, this.seavData, resourceTypeId, `${JSON.stringify(chartJson)}`
                , saveStatus, this.$route.query, value, type)
            }
          }
          this.openSeav = false;
        }
      });
    },
    saveFlowChart (scienceTagId, saveData, belongItemId, chartJson, status, query, value, type) {
      let _this = this
      this.axios
        .post("/pmph/action/flowChartAction/save", {
          id: saveData.id,
          scienceTagId: scienceTagId, //科学分类id
          scienceTagName: saveData.scientificType, //科学分类名称
          flowName: saveData.resourceName, //名称
          belongingItemName: saveData.resourceType, //所属项目
          belongingItemId: belongItemId, //所属项目id
          chartJson: chartJson, //数据
          status: status,
          taskItemId: query.taskItemId,
          rejectReason: value,
          auditLevel: query.auditLevel,
          type: type
        })
        .then((response) => {
          const self = this;
            setTimeout(() => {
              _this.creationCancel();
            }, 800);
        })
        .catch((error) => {
          this.$message.error("保存失败-");
        });
    },
    // 保存重置
    resetForm (el) {
      this.openSeav = false;
      this.$refs[el].resetFields();
    },
    atTheBottom () {
      let cell;
      if ($("#modifyImage").css("display") != "none") {
        cell = this.imgFormatData.cell;
        this.graphInstance.current.changeZindexBottom(cell);
      } else if ($("#modifyFormat").css("display") != "none") {
        cell = this.modifyFormatData.cell;
        this.graphInstance.current.changeZindexBottom(cell);
      } else {
        this.$message.warning("请选择要操作的元件");
      }
    },
    atTheTop () {
      let cell;
      if ($("#modifyImage").css("display") != "none") {
        cell = this.imgFormatData.cell;
        this.graphInstance.current.changeZindexTop(cell);
      } else if ($("#modifyFormat").css("display") != "none") {
        cell = this.modifyFormatData.cell;
        this.graphInstance.current.changeZindexTop(cell);
      } else {
        this.$message.warning("请选择要操作的元件");
      }
    },
    elAvatarSuccess (res, file) {
      this.imgFormatData.xlinkHref = res.path;
      this.recomposexlinkHref(
        this.imgFormatData.cell,
        this.imgFormatData.xlinkHref
      );
    },
    elAvatarUpload (file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/gif" ||
        file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 1000000000000;
      if (!isJPG) {
        this.$message.error("上传背景图片只能是 JPG、PNG 、GIF格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 10MB!");
      }
      return isJPG && isLt2M;
    },
    imageRemove (evt) {
      evt.stopPropagation();
      let url = "http://192.168.107.204:8080/image/flowchart/1603877195535.png";
      this.imgFormatData.xlinkHref = url;
      this.recomposexlinkHref(
        this.imgFormatData.cell,
        this.imgFormatData.xlinkHref
      );
    },
    // 获取所属项目
    getSubmitType () {
      this.axios
        .get("/pmph/action/flowChartAction/selectBelongingItemsData")
        .then((response) => {
          const self = this;
          this.resourceTypeData = response.data;
        })
        .catch((error) => {
          this.$message.error("类型获取失败");
        });
    },
    // 获取科学分类
    getScientificClassify () {
      this.axios
        .get("/pmph/action/flowChartAction/selectScienceData")
        .then((response) => {
          const self = this;
          this.scientificTypeData = response.data;
        })
        .catch((error) => {
          this.$message.error("类型获取失败");
        });
    },
    // 图片空格问题
    blankFun (a) {
      let b = "";
      for (let i = 0; i < a.length; i++) {
        if (a[i] == " ") {
          b += "%20";
        } else {
          b += a[i];
        }
      }
      return b;
    },
    // 添加历史颜色
    historyColor (val) {
      if (val == null) return
      let color = localStorage.getItem('historyColor')
      if (color == null) {
        localStorage.setItem('historyColor', val)
      } else {
        let arr = color.split('-')
        if (arr.indexOf(val) == -1) {
          localStorage.setItem('historyColor', val + '-' + color)
        };
      }
      let values = localStorage.getItem('historyColor').split('-')
      this.historyColorData = values.sort((a, b) => b - a).slice(0, 10);


    },
    // 添加host
    setUrl (data) {
      var protocol = window.location.protocol;
      var host = window.location.host;
      var port = window.location.port;

      if (host.indexOf('localhost') != -1 || host.indexOf('192.168.137.1') != -1) {
        host = '192.168.107.204:8089'
      }

      var url = protocol + '//' + host + data

      return url
    },
    // 动态设置source
    appendVideo(aVideo) {
     let  sHtml = '<source src="'+aVideo.src+'" type="' + aVideo.type + '" ></source>'
     console.log( $('#idVideoShow'));
     $('#idVideoShow').append(sHtml)
    },
  },
  components: {
    quillEditor,
  },
};
</script>

<style lang="scss" scoped>
#joint {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .el-header {
    height: auto !important;
    // background: #323334;
    padding: 0;

    .titleWrap {
      border-bottom: 1px solid #ccc;
      text-indent: 32px;
      height: 60px;
      line-height: 60px;

      h2 {
        display: inline-block;
        vertical-align: text-bottom;
        text-indent: 0;
        margin: 0;
      }
    }

    .title {
      float: left;
      width: 250px;
      letter-spacing: 4px;
      line-height: 60px;
      color: #000;
      text-indent: 32px;
    }

    .quickFunction {
      float: left;
      width: calc(100% - 300px);
      line-height: 60px;
      padding-left: 20px;
      color: #000;
      // background: var(--mainThemeColor) !important;
      .left {
        float: left;
      }

      .rihgt {
        float: right;
      }

      .el-button + .el-button {
        margin-left: 20px;
      }

      .percentage {
        // padding: 5px 15px;
        width: 75px;
        // height: 28px;
        font-size: 16px;
        border: 1px solid #000;
        border-radius: 3px;
      }

      .iconfont,
      .el-icon-setting {
        color: #000;
      }
    }
  }

  .el-main {
    width: calc(100% - 621px);
    flex: 0 0 auto;
    height: calc(100vh - 70px);
    background: #888;
    overflow: scroll !important;

    #workflowPaper {
      // width: calc(100%);
      background: #888;
    }

    #modifyFormat,
    #modifyImage,
    #modifyLink,
    #modifyCanvas {
      display: none;
      position: fixed;
      right: 0;
      top: 128px;
      width: 350px;
      padding: 10px;
      height: calc(100vh - 128px);
      overflow: auto;
      background: #fff;

      .title {
        font-size: 18px;
        font-weight: bold;
      }

      .el-form-item {
        margin-bottom: 0;
        display: inline-block;
        width: 105px;
        text-align: center;
        vertical-align: top;
        // height: 80px;
        margin-right: 5px;
      }
    }

    #modifyCanvas {
      display: block;
    }
  }

  /* 弹出框样式 */
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border: 1px solid #999;
  }

  .createCanvasWrap {
    width: 185px;
  }

  .avatar {
    width: 80px;
    height: 70px;
    display: block;
  }
}
.el-aside {
  height: calc(100% - 100px);
}
.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}

.contextmenu li {
  margin: 0;
  padding: 7px 16px;
  cursor: pointer;
}

.contextmenu li:hover {
  background: #eee;
}
</style>

<style lang="scss">
#joint {
  .current-view {
    display: none;
  }

  .setWidth {
    float: left;
    margin-left: 10px;
    width: 80px;
  }

  .el-button--text span {
    color: #000;
    font-size: 18px;
  }

  .el-main {
    position: relative;

    .el-collapse {
      border-top: none;

      .el-collapse-item__header {
        font-size: 16px;
        font-weight: bold;
      }

      .el-collapse-item__content {
        padding-left: 30px;
        padding-bottom: 0;
      }

      .el-form-item__content {
        top: -40px;
      }

      .el-form-item__label {
        position: relative;
        top: 30px;
      }

      .el-input-number__decrease,
      .el-input-number__increase {
        width: 15px;
        height: 18px;
        background: inherit;
        border-left: none;
        border-bottom: none;
      }

      .el-input-number.is-controls-right .el-input__inner {
        padding-left: 0;
        padding-right: 0;
        text-align: left;
        text-indent: 7px;
        height: 38px;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid #ccc;
        text-align: center;
      }

      .el-input__inner {
        padding: 0 20px 0 10px;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid #ccc;
        text-align: center;
      }

      .el-color-picker__trigger {
        border: none;
        border-radius: 0;
        width: 80px;
      }

      .el-input__icon {
        width: 0;
      }

      .el-radio-group {
        margin-bottom: 50px;
      }
    }

    .createCanvasImage {
      .el-collapse-item__wrap {
        height: 120px;

        .el-form-item__label {
          top: 80px;
          margin-left: 20px;
        }
      }
    }

    .createCanvasSize {
      .el-form-item {
        width: 80% !important;
        height: auto;

        .el-form-item__label {
          top: 0;
        }

        .el-form-item__content {
          top: 0;
          margin-left: 40px;
        }
      }
    }

    #scaleplate {
      position: sticky;
      top: -20px;
      left: 0;
      margin: 0 auto;
      padding: 0;
      height: 20px;
      z-index: 10;
      background: #888;

      li {
        list-style: none;
        float: left;
        width: 9px;
        height: 5px;
        font-size: 10px;
        color: #fff;
        line-height: 25px;
        border-top: 1px solid #fff;
        border-left: 1px solid #fff;

        &.ten {
          height: 10px;
          border-left: 1px solid #fff;
        }
      }
    }
  }

  .el-slider__runway {
    width: 95%;
  }

  .joint-navigator {
    position: fixed;
    left: 35px;
    bottom: 0;
    border: 1px solid #000;

    .current-view {
      height: 60px;
    }
  }

  .el-collapse-item__header {
    padding-left: 20px;
    font-size:16px;
    font-weight: bold;
  }

  .el-form--label-top .el-form-item__label {
    padding: 0;
  }

  .filterDx,
  .filterDy,
  .filterBlur {
    display: inline-block;
    width: 50px;
  }
}

.joint-paper-scroller {
  margin: 0 auto;
  overflow: hidden;
}

.joint-navigator {
  background: #fff;
}
#joint{
.Solid {
  font-weight: bold;
}

.Normal {
  font-weight: Normal;
}

.Light {
  font-weight: "Light";
}

.SimSun {
  font-family: "SimSun";
}

.SimHei {
  font-family: "SimHei";
}

.Microsoft {
  font-family: "Microsoft YaHei";
}

.myQuillEditor {
  height: 500px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
}
</style>
